<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="地域名称" :rules="rules.name" name="name">
            <a-input v-model:value="form.name" placeholder="请输入地域名称" />
        </a-form-item>
        <a-form-item label="地域编码" :rules="rules.code" name="code">
            <a-input v-model:value="form.code" placeholder="请输入地域编码" />
        </a-form-item>
        <a-form-item label="上级地域" :rules="rules.parentPath" name="parentPath">
            <tree-select v-model:value="form.parentId" :tree-data="treeList" placeholder="请选择上级地域" />
        </a-form-item>
        <a-form-item label="排序号" :rules="rules.sort" name="sort">
            <a-input-number v-model:value.number="form.sort" :min="1" placeholder="请输入排序号">
                <template #addonAfter>
                    <a-tooltip placement="bottomRight">
                        <template #title>排序号越小越靠前</template>
                        <question-circle-outlined />
                    </a-tooltip>
                </template>
            </a-input-number>
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { getTreeData } from '/@/api/System/Area/index'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import { useForm } from '@iframe/tools/mixins/FormMixins'
import { TreeSelect } from '@iframe/tools/components'
import TreeUtils from '@iframe/tools/utils/TreeUtils'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const form = reactive({})
const treeList = ref([])

const rules = reactive({
    code: { required: true, message: '请选择地域类型' },
    name: { required: true, message: '请输入地域名称' },
    sort: { required: true, message: '请输入排序号' }
})
const initTree = () => {
    getTreeData().then(result => {
        if (result.code === SUCCESS_CODE) {
            treeList.value = TreeUtils.generateTreeData(result.data)
        }
    })
}
initTree()
defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form) })
</script>
